<script setup>
import{getCourseDetailService,
    saveHomeWorkSer
} from '@/api/LoginManager.js'
import {
    Platform,
    Star,
    Bell
} from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'; 
import { ref } from 'vue'
import { onMounted } from 'vue';
import { useUserStore } from '@/stores/user';
const userStore = useUserStore()
const route = useRoute();  
const params = ref({
    userId:'',
    courseId:''
})
const CourseVo = ref({
    id:'',
    courseName:'',
    courseDesc:'',
    teacherName:'',
    courseStar:'',
    coursePoint:'',
    courseTime:'',
    courseTimeStr:'',
    selectTotal:'',
    courseType:'',
    courseTypeDesc:'',
    tags:[]
})
const subVolist = ref([])
const subVO = ref({
    id:'',
    courseSubName:'',
    courseSubTimeStr:'',
    point:''

})
onMounted(async () => {
    params.value.userId = userStore.token
    params.value.courseId = route.query.courseId
    const res = await getCourseDetailService(params.value);
    CourseVo.value = res.data.data.courseVo
    subVolist.value = res.data.data.subVoList 
    console.log(CourseVo.value)
    console.log(subVolist.value)
})

const fileList = ref([])
const courseResourceVo = ref({
    userId:'',
    courseId:'',
    courseSubId:'',
    resourceName:'',
    resourcePath:''
})

const uploadFile = async (response,uploadFile) => {
  courseResourceVo.value.resourceName = uploadFile.name
  courseResourceVo.value.resourcePath = response
  courseResourceVo.value.userId = userStore.token
  await saveHomeWorkSer(courseResourceVo.value)
  ElMessage.success('成功！')
  courseResourceVo.value = {}
}

const editRow = (id)=>{
    courseResourceVo.value.courseId = params.value.courseId
    courseResourceVo.value.courseSubId = id
}

</script>

<template>


    <!-- 需求基本信息 -->
    <div class="cus-task-detail-info">
        <el-row :gutter="20">
            <el-col :span="19">
                <div class="content-left">
                    <div class="cus-detail-content-header">
                        <div class="cus-margin-border">
                            <h1>{{ CourseVo.courseName }}</h1>
                        </div>

                        <div class="cus-margin-border">
                            <span style="font-size: 24px;">{{ CourseVo.courseDesc }}</span>
                        </div>
                        <div class="cus-margin-border">
                            <span style="font-size: 20px;">类型{{CourseVo.courseTypeDesc}}</span>
                        </div>
                    </div>
                    <div class="cus-detail-content">
                        <div v-for="vo in subVolist" :key="vo.id">
                            <div style="display: flex;flex-direction: row;justify-content: space-between;">
                                <div class="title">
                                    <el-link type="info">
                                        {{vo.courseSubName}} {{ vo.courseSubTimeStr}}
                                    </el-link>
                                </div>
                                <div>
                                    {{ vo.point }}
                                </div>
                                <div>
                                    <el-upload
                                    v-model:file-list="fileList"
                                    action="http://localhost:8080/api/file/upload"
                                    multiple
                                    :on-success="uploadFile"  
                                    >
                                    <el-button size="small" type="primary" @click="editRow(vo.id)">点击上传</el-button>
                                    </el-upload>
                                </div>
                            </div>
                            
                            <el-divider />
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="right">
                    <div style="min-height: 50px;">
                        <div style="display: flex;justify-content: start;">
                            <el-button type="primary">快速报名</el-button>
                        </div>
                    </div>

                    <div style="margin-bottom: 20px;">
                        课程老师:{{ CourseVo.teacherName }}
                    </div>
                    <div style="margin-bottom: 20px;">
                        开课时间:{{ CourseVo.courseTimeStr }}
                    </div>
                    <div style="margin-bottom: 20px;">
                        学分{{CourseVo.coursePoint}}
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>


</template>

<style lang="scss" scoped>
ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

ul li {
    display: block;
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
}

.cus-task-deail-image {
    margin-top: 20px;

    .grid-content {
        border-radius: 4px;
    }
}


.cus-task-detail-info {
    margin-top: 30px;

    .content-left {
        .cus-detail-content-header {
            display: flex;
            flex-direction: column;
            padding: 20px;
            min-height: 200px;
            background: linear-gradient(to bottom, #C0E6FF, white);

            .cus-margin-border {
                margin-bottom: 20px;
            }
        }

        .cus-detail-content {
            padding: 20px;
            min-height: 1000px;
            background-color: #fff
        }
    }
    .right {
        box-sizing: border-box;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
}

.cus-task-deatail-main {
    margin-top: 30px;

    .content-left {
        background-color: #fff;
        height: 300px;
    }
}
</style>